<template>
  <div>
    <el-button-group>
      <el-button type="primary" @click="zoomIn">放大</el-button>
      <el-button type="primary" @click="zoomOut">缩小</el-button>
      <el-button type="primary" @click="zoomReset">大小适应</el-button>
      <el-button type="primary" @click="translateRest">定位还原</el-button>
      <el-button type="primary" @click="reset">还原(大小&定位)</el-button>
      <el-button type="primary" @click="undo" :disabled="undoDisable">上一步(ctrl+z)</el-button>
      <el-button type="primary" @click="redo" :disabled="redoDisable">下一步(ctrl+y)</el-button>
      <el-button type="primary" @click="download">下载图片</el-button>
      <el-button type="primary" @click="catData">查看数据</el-button>
      <!-- <el-button type="primary" @click="showMiniMap">查看缩略图</el-button> -->
    </el-button-group>
  </div>
</template>

<script setup name="Control">
import { onMounted, ref } from 'vue';

const props = defineProps({
  lf: {
    type: Object || String
  },
  catTurboData: {
    type: Boolean
  }
})

const undoDisable = ref(true)
const redoDisable = ref(true)
const graphData = ref(null)
const dataVisible = ref(false)

onMounted(()=>{
  props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
      undoDisable.value = !undoAble
      redoDisable.value = !redoAble
    })
})

const emits = defineEmits(['catData'])

function zoomIn(){
  props.lf.zoom(true);
}
function zoomOut(){
  props.lf.zoom(false);
}
function zoomReset(){
  props.lf.resetZoom();
}
function translateRest(){
  props.lf.resetTranslate();
}
function reset(){
  props.lf.resetZoom();
  props.lf.resetTranslate();
}
function undo(){
  props.lf.undo();
}
function redo(){
  props.lf.redo();
}
function download(){
  props.lf.getSnapshot();
}
function catData(){
  emits('catData');
}
function showMiniMap() {
  const { lf } = props; 
  lf.extension.miniMap.show(lf.graphModel.width - 400, 60)
}
</script>

<style scoped>
</style>
